<script setup lang="ts">
import { reactive, ref } from 'vue'
const a = 1
const b = 2
const boo : boolean = true
const num = 0
const getxi =  () => { 
  return '我是你大爹'
}
const z = (a:number , b:number) => {
alert('我点了然后呢' + "" +  a + b)
}
const getChange = (event: Event) => {
  const inputDom = event.target as HTMLInputElement
  console.log("值改变了", inputDom.value)
}
const getdown = (event:KeyboardEvent) => {
if(event.key === "Enter"){
  alert('回车')
}
}
const person =  reactive<{
  name:string,
  age:number,
  sex:'男' | '女'
}>({
  name:'张三',
  age:26,
  sex:'男'
})
const changeSex = () => {
  person.name = '李四'
}
const ismarry = ref(true)
const getmarry = () => {
  ismarry.value = true
}
const people = ref<{money:number,weight:number}>({
money:10000000000000000,
weight:60
})
const getchange = () => {
  people.value.money += 1000
  people.value.weight += 10
}
const weather = ref("晴转多云")

const feeling = ref(`<h2><strong style="color:blue"> 我的心情跌落到谷底-我emo了</strong></h2>`)

// 变脸
const changeFace = () => {
  feeling.value = `
     <h1 style="color: red">
        我发怒了
     </h1>

  `
}
</script>

<template>
<div class="container">
  <p>1 + 1 = {{ a + b }}</p>
  <p>嘻嘻 {{ boo ? 'w' : 'c' }}</p>
  <p>{{getxi()}}</p>
  <p>{{ 1 + 2 }}</p>
  <p>{{num || "hah"}}</p>
  <button @click="z(1,2)">点我一下试试</button>
  <!-- 完成写法v-on:事件名="方法名" -->
   <!-- 语法糖的的写法 @click -->
  <!-- change/input -->
   <input type="text" @input="getChange" @keydown="getdown">
   <h1>响应式数据Reactive - 对象</h1>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <p>性别:{{ person.sex }}</p>
     <button @click="person.sex = '女'">变性</button>
     <button @click="changeSex">变性</button>
     <h1>响应式数据ref - 简单数据类型</h1>
     <p>{{ ismarry ? '已婚' : '单身狗' }}</p>
     <button @click="ismarry = false">改变</button>
     <button @click="getmarry">改变1</button>
     <h1>响应式数据ref - 复杂数据类型</h1>
     <p>{{ people.money }}</p>
     <p>{{ people.weight }}</p>
     <button @click="getchange">点击</button>
     <h1>v-text和v-html指令</h1>
    <div v-text="weather"></div>
    <div v-html="feeling"></div>
    <button @click="weather = '狂风暴雨'">变天</button>
    <button @click="changeFace">变脸</button>
</div>
</template>

<style scoped>

</style>
